<div class="signupPayForm-container">
    <header class="text-center header signupPayForm-header">
        <img class="signupPayForm-header-logo" src="/assets/img/logo/logo-purple.svg" height="34" />
        <h2 class="signupPayForm-header-title">
            <i class="fa fa-money"></i>
            <span translate translate-context="Title">Billing Information</span>
        </h2>
        <p class="signupPayForm-thanks"></p>
    </header>
    <hr />

    <div class="pm_grid">
        <div class="col-1-4 bold" translate translate-context="Title">Overview</div>
        <div class="col-3-4 pm_table">
            <table class="print">
                <tbody>
                    <tr>
                        <th scope="row" translate translate-context="Title">Plan</th>
                        <td>
                            <strong class="signupPayForm-plan-name">{{ ::plan.name }}</strong>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row" translate translate-context="Title">Billing</th>
                        <td>
                            <strong class="signupPayForm-plan-billing">{{ ::plan.billing }}</strong>
                        </td>
                    </tr>
                    <tr class="signupPayForm-gift-amount-row">
                        <th scope="row" translate-context="Title" translate>Gift code</th>
                        <td>
                            <strong class="signupPayForm-plan-gift text-green">{{ plan.gift }}</strong>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row" translate translate-context="Title">Price</th>
                        <td>
                            <strong class="signupPayForm-plan-price">{{ plan.price }}</strong>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <form name="payForm" novalidate class="pm_form">

        <div class="signupPayForm-paymentInfo">
            <div class="pm_grid margin">
                <div class="col-1-2">
                    <label for="paymentMethod" translate translate-context="Title" translate-comment="form label">Payment method</label>
                </div>
                <div class="col-1-2">
                    <div class="pm_select">
                        <select
                            id="paymentMethod"
                            ng-model="method"
                            ng-change="onPaymentMethodChange()"
                            ng-options="method.label for method in methods"></select>
                        <i class="fa fa-angle-down"></i>
                    </div>
                </div>
            </div>

            <div class="pm_grid" ng-if="method.value === 'card'">
                <card-view
                    data-card="account.card"
                    data-form="payForm"></card-view>
            </div>

            <div class="pm_grid" ng-if="method.value === 'paypal'">
                <paypal-view
                    data-callback="onPaypalSuccess"
                    data-currency="payment.Currency"
                    data-amount="payment.AmountDue"></paypal-view>
            </div>
        </div>

        <div class="pm_grid signupPayForm-gift-row">
            <div class="col-1-4 bold">
                <label for="giftCodeInput" translate-context="Title" translate>Gift code</div>
            <div class="col-3-4 signupPayForm-gift-col">
                <gift-code-btn data-action="displayGiftSignup"></gift-code-btn>
                <gift-code-input data-code="giftCode" data-form="payForm"></gift-code-input>
                <button class="signupPayForm-btn-apply pm_button" type="button" translate-context="Action" translate>Apply</button>
            </div>
        </div>

        <footer class="text-center signupPayForm-footer">
            <button
                class="pm_button primary large signupPayForm-btn-submit disabled-if-network-activity"
                type="submit"
                translate
                translate-context="Action">Submit</button>
            <button
                class="pm_button primary large signupPayForm-btn-retry disabled-if-network-activity"
                type="submit"
                translate
                translate-context="Action">Retry</button>
            <button
                class="pm_button link signupPayForm-btn-cancel disabled-if-network-activity"
                signup-step-link="3"
                translate
                translate-context="Action">Cancel</button>
        </footer>
    </form>
</div>
